<html lang="en">

<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" href="./css/register.css">
    <style>
        body{
            margin: 0;
            padding: 0;
            height: 100vh;
        }
    </style>
</head>


<body id="particles-js">
<div id="loginDiv">
<!--    <form>-->
<!--        <h1>传智健康注册页面</h1>-->
<!--        <p><span style="color: red">*</span>用&nbsp;&nbsp;户&nbsp;&nbsp;名:<input id="username" v-model="username" name="username" type="text" autofocus required placeholder="请输入您的手机号">-->
<!--        </p>-->
<!--        <span id="regPhone"></span>-->

<!--        <p><span style="color: red">*</span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:<input id="password" v-model="password" type="password" onkeyup="validate()" required placeholder="请设置登录密码"></p>-->

<!--        <p><span style="color: red">*</span>确认密码:<input id="surePassword" v-model="surePassword" type="password" onkeyup="validate()" required placeholder="请确认登录密码"></p>-->
<!--        <span id="validateMsg"></span>-->
<!--        <p><span style="color: red">*</span>验&nbsp;&nbsp;证&nbsp;&nbsp;码:<input id="code" v-model="code" type="text" required placeholder="请输入短信验证码"><button id="getCode" type="button" style="margin: 3px;padding:3px;border-radius: 8px;color: dimgrey">获取短信验证码</button> </p>-->
<!--&lt;!&ndash;        <p id="msg" style="color: #ff0000">{{msg}}</p>&ndash;&gt;-->
<!--&lt;!&ndash;        <p><span style="color: red">*</span>电子邮件:<input id="email" v-model="email" type="email" required placeholder="请输入电子邮箱"></p>&ndash;&gt;-->

<!--        <p style="text-align: center;">-->
<!--            <input type="submit" class="button" @click="submit" value="提交">-->
<!--        </p>-->
<!--    </form>-->
    <form>
        <h1>黑马面面注册页面</h1>
        <p><span style="color: red">*</span>用&nbsp;&nbsp;户&nbsp;&nbsp;名:<input id="username" v-model="username" name="username" type="text" autofocus required placeholder="请输入您的手机号">
        </p>
        <span id="regPhone"></span>

        <p><span style="color: red">*</span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:<input id="password"  v-model="password" name="password" type="password" onkeyup="validate()" required placeholder="请设置登录密码"></p>

        <p><span style="color: red">*</span>确认密码:<input id="surePassword" v-model="surePassword" name="surePassword" type="password" onkeyup="validate()" required placeholder="请确认登录密码"></p>
        <span id="validateMsg"></span>
        <p><span style="color: red">*</span>验&nbsp;&nbsp;证&nbsp;&nbsp;码:<input id="code" v-model="code" name="code" type="text" required placeholder="请输入短信验证码"><button id="getCode" type="button" style="margin: 3px;padding:3px;border-radius: 8px;color: dimgrey">获取短信验证码</button> </p>
<!--        <p id="msg" style="color: #ff0000">${msg}</p>-->
<!--        <p><span style="color: red">*</span>电子邮件:<input id="email" name="email" type="email" required placeholder="请输入电子邮箱"></p>-->

        <p style="text-align: center;">
            <input type="submit" class="button" @click="submit" value="提交">
        </p>
    </form>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/register.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
</body>
<script>

    // 重新输入username，把报错msg提示清空
    document.getElementById("username").onfocus=function (){
        document.getElementById("msg").innerHTML="";
    }

    // 验证两次密码是否相同
    function validate(){
        let password = document.getElementById("password").value;
        let surePassword = document.getElementById("surePassword").value;
        <!-- 对比两次输入的密码 -->
        if(password == surePassword){
            document.getElementById("validateMsg").innerHTML="<b><font size='3px'; color='#32cd32';>两次密码相同</font></b>";
        } else {
            document.getElementById("validateMsg").innerHTML="<b><font size='3px'; color='#ff4500';>两次密码不相同</font></b>";
        }
    }
    // 判断用户名是否为手机号
    document.getElementById("username").onblur = function (){
        let regPhone = /^[1][358][0-9]{9}$/;
        if(!regPhone.test(document.getElementById("username").value)&&document.getElementById("username").value != null){
            document.getElementById("regPhone").innerHTML="<b><font size='3px'; color='#ff4500';>用户名请输入您的手机号</font></b>";
        }
    }
    document.getElementById("username").onfocus = function (){
        document.getElementById("regPhone").innerHTML="";
    }



    let vue = new Vue({
        el:"#loginDiv",
        data:{
            username:"",
            password:"",
            surePassword:"",
            code:""
        },
        methods:{
            submit(){
                axios.get("/user/register.do?username=" + this.username + "&password=" + this.password + "&code=" + this.code)
                    .then(res => {
                        if (res.data.flag) {
                            alert(res.data.message)
                            window.location.href = "/login.html";
                        } else {
                            alert(res.data.message)
                        }
                    })
            }
        }
    });

    // 获取验证码
    let bt01 = document.getElementById("getCode");
    bt01.onclick = function() {
        let regPhone = /^[1][358][0-9]{9}$/;
        if(regPhone.test(document.getElementById("username").value)){
            $.ajax({
                url:"/user/register/getCode.do",
                data:{
                    phone:document.getElementById("username").value
                }
            });
            bt01.disabled = true;  //当点击后倒计时时候不能点击此按钮
            let time = 120;  //倒计时120秒
            let timer = setInterval(fun1, 1000);  //设置定时器
            function fun1() {
                time--;
                if(time>=0) {
                    bt01.innerHTML = time + "s后重新发送";
                }else{
                    bt01.innerHTML = "重新发送验证码";
                    bt01.disabled = false;  //倒计时结束能够重新点击发送的按钮
                    clearTimeout(timer);  //清除定时器
                    time = 120;  //设置循环重新开始条件
                }
            }
        }
    }
</script>
</html>